<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>
<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import { useMenuStore, useuserInfoStore } from './stores/counter'
import routerConfig from './router/config'

let $router = useRouter()
let $route = useRoute() //当前路由
let $menuStore = useMenuStore()
let $userInfoStore = useuserInfoStore()

let menuList: any = window.localStorage.getItem('menuList')
let routerList: any = window.localStorage.getItem('routerList')
let userinfo: any = window.localStorage.getItem('userinfo')

if (menuList) {
  menuList = JSON.parse(menuList)
  routerList = JSON.parse(routerList)
  userinfo = JSON.parse(userinfo)

  $menuStore.initList(menuList)
  $userInfoStore.inituserinfo(userinfo)
  //新增的时候 都需要把路由清空
  $router.removeRoute('main')
  $router.addRoute('main', {
    path: '/main',
    name: 'main',
    component: routerConfig['main']
  })
  $router.addRoute('main', {
    //设置默认
    path: '',
    name: 'main1',
    component: routerConfig[routerList[0]?.com]
  })
  routerList.forEach((item: any) => {
    $router.addRoute('main', {
      path: '/main' + item.path,
      name: item.name,
      component: routerConfig[item?.com]
    })
  })
  $router.push(window.location.hash.split('#')[1])
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  // overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
}

.router-link-active {
  color: red;
}

.menu {
  min-height: 660px;
}

.app .el-col-4 {
  background-color: rgb(4, 40, 86);
}

.app .el-menu-vertical-demo {
  --el-menu-bg-color: rgb(4, 40, 86) !important;
  --el-menu-hover-bg-color: rgb(95, 112, 134) !important;
  // --el-menu-hover-bg-color: rgb(29, 93, 177) !important;
  --el-menu-border-color: none;
}

.el-menu--inline {
  --el-menu-hover-bg-color: rgb(132, 140, 156) !important;
  --el-menu-bg-color: rgb(4, 40, 86) !important;
}

.el-menu-vertical-demo {
  height: 100%;
  // margin-right: 10px;
}
</style>
